Pravilo CSS @property: Sprostitev moči definicije tipa lastnosti po meri

Svet CSS-a se nenehno razvija in eden novejših ter močnejših dodatkov je pravilo @property. To pravilo omogoča mehanizem za definiranje tipov lastnosti po meri, kar prinaša večji nadzor in prilagodljivost v vaš CSS ter odpira vrata do bolj sofisticiranih animacij, izboljšanih zmožnosti tem in robustnejše celotne arhitekture CSS. Ta članek se bo poglobil v pravilo @property, raziskal njegovo sintakso, zmožnosti in praktične uporabe, pri tem pa ohranil globalno občinstvo v mislih.

Kaj so lastnosti CSS po meri (spremenljivke)?

Preden se poglobimo v pravilo @property, je bistveno razumeti lastnosti CSS po meri, znane tudi kot spremenljivke CSS. Lastnosti po meri vam omogočajo, da v svojem CSS-u definirate vrednosti za večkratno uporabo, kar naredi vaše stilske liste bolj vzdrževane in lažje za posodabljanje. Deklarirajo se s sintakso --ime-spremenljivke in dostopajo z uporabo funkcije var().

Primer:

:root {
  --primary-color: #007bff; /* Globalno definirana primarna barva */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

V tem primeru sta --primary-color in --secondary-color lastnosti po meri. Če morate spremeniti primarno barvo na celotni spletni strani, jo morate posodobiti le na enem mestu – v selektorju :root.

Omejitev osnovnih lastnosti po meri

Čeprav so lastnosti po meri izjemno uporabne, imajo pomembno omejitev: v bistvu se obravnavajo kot nizi. To pomeni, da CSS sam po sebi ne ve, kakšen tip vrednosti vsebuje lastnost po meri (npr. število, barva, dolžina). Čeprav brskalnik poskuša sklepati o tipu, lahko to privede do nepričakovanega obnašanja, zlasti pri animacijah in prehodih. Na primer, poskus animiranja lastnosti po meri, ki vsebuje barvo, morda ne bo deloval, kot je pričakovano, ali pa ne bo deloval dosledno v različnih brskalnikih.

Predstavitev pravila @property

Pravilo @property odpravlja to omejitev, saj vam omogoča eksplicitno definiranje tipa, sintakse, začetne vrednosti in dedovanja lastnosti po meri. To zagotavlja veliko bolj robusten in predvidljiv način dela z lastnostmi po meri, zlasti pri njihovem animiranju ali prehodih.

Sintaksa pravila @property

Osnovna sintaksa pravila @property je naslednja:

@property --ime-lastnosti {
  syntax: ;
  inherits: ;
  initial-value: ;
}

Poglejmo si vsak del pravila podrobneje:

• --ime-lastnosti: To je ime lastnosti po meri, ki jo definirate. Začeti se mora z dvema vezajema (--).
• syntax: Določa pričakovani tip vrednosti lastnosti po meri. To je niz, ki opisuje veljavne vrednosti za lastnost po meri. Pogoste vrednosti sintakse vključujejo:
• *: Ujema se s katero koli vrednostjo. To je privzeta vrednost, če sintaksa ni določena. Uporabljajte jo previdno, saj obide preverjanje tipa.
• <color>: Ujema se s katero koli veljavno vrednostjo barve v CSS (npr. #ff0000, rgb(255, 0, 0), red).
• <length>: Ujema se s katero koli veljavno vrednostjo dolžine v CSS (npr. 10px, 2em, 50%).
• <number>: Ujema se s katero koli številsko vrednostjo (npr. 1, 3.14, -2.5).
• <integer>: Ujema se s katero koli celoštevilsko vrednostjo (npr. 1, -5, 0).
• <angle>: Ujema se s katero koli vrednostjo kota (npr. 45deg, 0.5rad, 100grad).
• <time>: Ujema se s katero koli časovno vrednostjo (npr. 1s, 500ms).
• <percentage>: Ujema se s katero koli odstotkovno vrednostjo (npr. 50%, 100%).
• <image>: Ujema se s katero koli slikovno vrednostjo (npr. url(image.jpg), linear-gradient(...)).
• <string>: Ujema se s katero koli nizovno vrednostjo (zaprto v dvojne ali enojne narekovaje).
• Lahko tudi kombinirate deskriptorje sintakse z uporabo |, da omogočite več tipov (npr. <length> | <percentage>).
• Za definiranje bolj zapletene sintakse lahko uporabite regularne izraze. To uporablja CSS-široke ključne besede inherit, initial, unset in revert kot veljavne vrednosti, če jih sintaksa določa, tudi če običajno niso dovoljene za tip sintakse. Primer: '\d+px' dovoljuje vrednosti kot '10px', '200px', ne pa '10em'. Upoštevajte dvojno ubežanje poševnice nazaj.
• inherits: To je logična vrednost (true ali false), ki določa, ali naj lastnost po meri podeduje svojo vrednost od nadrejenega elementa. Privzeta vrednost je false.
• initial-value: Določa začetno vrednost lastnosti po meri. To je vrednost, ki jo bo lastnost imela, če ni eksplicitno nastavljena na elementu. Pomembno je zagotoviti veljavno začetno vrednost, ki se ujema z definirano sintakso. Če začetna vrednost ni podana in lastnost ni podedovana, bo njena začetna vrednost neveljavna vrednost lastnosti.

Praktični primeri pravila @property

Oglejmo si nekaj praktičnih primerov, ki ponazarjajo, kako se pravilo @property lahko uporablja v resničnih scenarijih.

Primer 1: Animacija barve po meri

Animiranje barv z uporabo standardnih prehodov CSS je lahko včasih zapleteno. Pravilo @property to močno olajša.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Spremeni v zeleno barvo ob prehodu miške */
}

V tem primeru definiramo lastnost po meri, imenovano --brand-color, in določimo, da je njena sintaksa <color>. Nastavimo tudi začetno vrednost #007bff (odtenek modre). Zdaj, ko se z miško premaknemo čez element .element, se barva ozadja gladko spremeni iz modre v zeleno.

Primer 2: Animacija dolžine po meri

Animiranje dolžin (npr. širine, višine) je še en pogost primer uporabe pravila @property.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Tukaj definiramo lastnost po meri, imenovano --element-width, in določimo, da je njena sintaksa <length>. Začetna vrednost je nastavljena na 100px. Ko se z miško premaknemo čez element .element, se njegova širina gladko spremeni iz 100px v 200px.

Primer 3: Ustvarjanje vrstice napredka po meri

Pravilo @property se lahko uporabi za ustvarjanje vrstic napredka po meri z večjim nadzorom nad animacijo.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

V tem primeru definiramo lastnost po meri, imenovano --progress, ki predstavlja odstotek napredka. Nato uporabimo funkcijo calc() za izračun širine vrstice napredka glede na vrednost --progress. Z nastavitvijo atributa data-progress na elementu .progress-bar lahko nadzorujemo raven napredka.

Primer 4: Ustvarjanje tem z lastnostmi po meri

Pravilo @property izboljša ustvarjanje tem, saj zagotavlja zanesljivejše in predvidljivejše obnašanje pri preklapljanju med različnimi temami. Poglejmo si naslednji primer za preprosto preklapljanje med temno/svetlo temo:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Privzeto za svetlo temo */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Privzeto za svetlo temo */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Temna tema */
    --text-color: #ffffff;
}

Z definiranjem --bg-color in --text-color s pravilom @property bo prehod med temami bolj gladek in zanesljiv v primerjavi z uporabo osnovnih lastnosti po meri brez definiranih tipov.

Združljivost z brskalniki

Konec leta 2023 je podpora brskalnikov za pravilo @property na splošno dobra v sodobnih brskalnikih, vključno s Chromom, Firefoxom, Safarijem in Edgem. Vendar je vedno dobro preveriti najnovejše informacije o združljivosti brskalnikov na spletnih straneh, kot je Can I Use (caniuse.com), da zagotovite, da ima vaša ciljna publika ustrezno podporo za to funkcijo.

Če morate podpirati starejše brskalnike, ki ne podpirajo pravila @property, lahko uporabite zaznavanje funkcij z JavaScriptom in zagotovite nadomestne rešitve. Na primer, z JavaScriptom lahko zaznate, ali brskalnik podpira CSS.registerProperty (JavaScript API, povezan z @property) in nato uporabite alternativne stile, če ni podprt.

Najboljše prakse za uporabo pravila @property

Tukaj je nekaj najboljših praks, ki jih je treba upoštevati pri uporabi pravila @property:

• Pazljivo definirajte sintakso: Izberite najustreznejšo vrednost sintakse za svojo lastnost po meri. To bo pomagalo preprečiti napake in zagotoviti, da se vaš CSS obnaša, kot je pričakovano.
• Zagotovite začetne vrednosti: Vedno zagotovite initial-value za svoje lastnosti po meri. To zagotavlja, da ima lastnost veljavno vrednost, tudi če ni eksplicitno nastavljena na elementu.
• Upoštevajte dedovanje: Pazljivo razmislite, ali naj vaša lastnost po meri podeduje svojo vrednost od nadrejenega elementa. V večini primerov je najbolje nastaviti inherits na false, razen če imate poseben razlog za omogočanje dedovanja.
• Uporabljajte opisna imena lastnosti: Izberite opisna imena za svoje lastnosti po meri, ki jasno kažejo njihov namen. To bo naredilo vaš CSS bolj berljiv in vzdrževan. Na primer, namesto --color uporabite --primary-button-color.
• Temeljito testirajte: Testirajte svoj CSS v različnih brskalnikih in napravah, da zagotovite, da deluje, kot je pričakovano. Posebno pozornost posvetite animacijam in prehodom, saj so to področja, kjer ima lahko pravilo @property največji vpliv.
• Dokumentirajte svojo kodo: V svoj CSS dodajte komentarje, da pojasnite namen svojih lastnosti po meri in kako se uporabljajo. To bo olajšalo razumevanje vaše kode drugim razvijalcem (in vam v prihodnosti).

Premisleki o dostopnosti

Pri uporabi pravila @property je pomembno upoštevati dostopnost. Zagotovite, da vaše animacije in prehodi niso preveč moteči ali dezorientirajoči za uporabnike s kognitivnimi motnjami. Izogibajte se uporabi animacij, ki utripajo ali bliskajo, saj lahko pri nekaterih posameznikih sprožijo epileptične napade.

Prav tako poskrbite, da vaše izbire barv zagotavljajo zadosten kontrast za uporabnike z okvarami vida. Za preverjanje, ali vaše barvne kombinacije ustrezajo smernicam za dostopnost, lahko uporabite orodja, kot je WebAIM Contrast Checker.

Globalni premisleki

Pri razvoju spletnih strani in aplikacij za globalno občinstvo je pomembno upoštevati kulturne razlike in lokalizacijo. Tukaj je nekaj stvari, ki jih je treba upoštevati pri uporabi pravila @property v globalnem kontekstu:

• Smer besedila: Bodite pozorni na smer besedila (od leve proti desni v primerjavi z desne proti levi), ko uporabljate lastnosti po meri za nadzor postavitve ali pozicioniranja. Uporabite logične lastnosti (npr. margin-inline-start namesto margin-left), da zagotovite, da se vaša postavitev pravilno prilagodi različnim smerem besedila.
• Formati številk in datumov: Bodite pozorni na različne formate številk in datumov, ki se uporabljajo v različnih državah. Izogibajte se trdnemu kodiranju specifičnih formatov v vašem CSS-u in se raje zanašajte na privzeto oblikovanje brskalnika ali uporabite JavaScript za oblikovanje številk in datumov glede na lokalne nastavitve uporabnika.
• Simbolika barv: Zavedajte se, da imajo barve lahko različne pomene v različnih kulturah. Izogibajte se uporabi barv, ki bi lahko bile v določenih kulturah žaljive ali neprimerne.
• Podpora za jezike: Zagotovite, da vaše lastnosti po meri pravilno delujejo z različnimi jeziki. Testirajte svojo spletno stran z različnimi jeziki, da ugotovite morebitne težave.

Prihodnost lastnosti CSS po meri in pravila @property

Pravilo @property predstavlja pomemben korak naprej v evoluciji CSS-a. Ker se podpora brskalnikov še naprej izboljšuje, lahko pričakujemo še več inovativnih uporab te močne funkcije. V prihodnosti bomo morda videli nove vrednosti sintakse, dodane pravilu @property, za podporo bolj zapletenih tipov podatkov, kot so polja in objekti. Morda bomo videli tudi boljšo integracijo z JavaScriptom, kar bo razvijalcem omogočilo dinamično ustvarjanje in manipulacijo lastnosti po meri med izvajanjem.

Kombinacija lastnosti po meri in pravila @property utira pot bolj modularni, vzdrževani in močni arhitekturi CSS. Z sprejetjem teh funkcij lahko razvijalci ustvarijo bolj sofisticirane in privlačne spletne izkušnje, ki so dostopne uporabnikom po vsem svetu.

Zaključek

Pravilo @property omogoča spletnim razvijalcem definiranje tipov lastnosti po meri, kar odpira nove možnosti za animacije, teme in celotno arhitekturo CSS. Z razumevanjem njegove sintakse, zmožnosti in najboljših praks lahko to močno funkcijo izkoristite za ustvarjanje bolj robustnih, vzdrževanih in vizualno privlačnih spletnih aplikacij. Ker podpora brskalnikov še naprej raste, bo pravilo @property nedvomno postalo bistveno orodje v zbirki orodij sodobnega spletnega razvijalca. Sprejmite to tehnologijo, eksperimentirajte z njenimi zmožnostmi in sprostite polni potencial lastnosti CSS po meri.

Nadaljnje branje

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1